<template>
<div>
    <div class="container">
        <div class="relative-box relative-left"></div>
        <div class="">
        <div class="relative-box relative-center"></div>
        </div>
    </div>
    <div class="container-flex">
        <div class="relative-box"> </div>
    </div>
    </div>
</template>
<script>
export default{
    data(){
        return{};
    },
    methods: {},
};
</script>
<style scoped>
.container{
    position: relative;
    height: 100px;
   
}
.relative-box{
    position:absolute;
    width: 100px; 
    height: 100px;
    border: 1px solid black;
    background: red;

}
.relative-left{
    left: 100px;
    
}
.relative-center{
    left: 50%;
    margin-left: -50px;

}
.container-flex{
    display: flex;
    justify-content: center;
    height: 100px;

}



</style>